<template>

  <div class="userlist">
    <top></top>
    <el-main>
      <!-- 账号列表 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>用户账号列表</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="openAddUser">添加</el-button>

        </div>
        <div class="text item">
          <!-- 表格 -->
          <el-table
            :data="userList"
            stripe
            style="width: 100%">
            <el-table-column
              prop="username"
              label="账号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="realname"
              label="实名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="age"
              label="年龄"
              width="180">
            </el-table-column>
            <el-table-column
              prop="idType"
              label="身份证号">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="handleEdit(scope.row)" type="text" size="small">修改</el-button>
                <el-button @click="handleDel(scope.row.id)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>

          </el-table>
        </div>
      </el-card>
    </el-main>

    <div class="addUser">
      <add-user :open="open" @cancel="closeAddUser" @success="success" ref="addUser"  :insert="insert"></add-user>
    </div>

  </div>
</template>

<script>
  import Top from '@/common/top'
  import AddUser from '@/common/adduser'
  import {mapGetters, mapMutations, mapActions} from 'vuex'
  import UserForm from '@/js/userForm'

  export default {
    name: "userlist",
    components: {
      Top, AddUser
    },
    data() {
      return {
        open: false,
        insert:true

      }
    },
    methods: {

      success(msg) {
        let loginSuccess = {
          message: msg,
          type: 'success'
        }
        this.setUserList()
        this.$message(loginSuccess)

      },
      closeAddUser() {
        this.$refs.addUser.resetFields()
        setTimeout(()=>{
          this.open = false
        },20)



      },
      openAddUser() {
        this.insert = true
        setTimeout(() => {
          this.open = true
          this.$refs.addUser.formReset()
        }, 20)

      },
      handleEdit(user) {
        let tmpUser = new UserForm(user)
        this.insert=false;

        setTimeout(()=>{
          this.open = true
          this.$refs.addUser.setForm(tmpUser)
        },20)



      },
      handleDel(id) {
        this.$confirm('确认删除此用户?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post('/api/deleteUserById', {id: id}).then(response => {
            if (response.data.code === '1') {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.setUserList()
            } else {
              this.$message({
                type: 'error',
                message: '删除失败!'
              });
            }
          })

          /*console.log(id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });*/
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });


      },
      ...mapActions([
          'setUserList'
        ]
      )
    },
    mounted() {
      this.setUserList()
    },
    computed: {

      ...mapGetters([
        'userList'
      ])
    }
  }
</script>


<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .userlist {
    width: 100%;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .cell {
    text-align: center;
  }

  .box-card {

  }

</style>



